/**
 * 1. 表单元素提供了 value or checked，没有提供 事件(onChange)的话，会报错。并且不响应操作
 *    并且需要正确的去写完代码
 *
 *    你敢写 value 或者 checked 。它就敢找你要 onChange 。它认为你要做成受控组件。
 *
 *
 * 非受控组件需要有个默认值，该如何办？
 *    value => defaultValue
 *    checked => defaultChecked
 */

import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  state = {
    username: "",
  };

  setUsername = (event) => {
    console.log("setUsername");
    // 取值
    const value = event.target.value;
    // 设置
    this.setState({
      username: value,
    });
  };

  render() {
    console.log("render");
    return (
      <div>
        <h1>App</h1>

        <form>
          <div>
            <label>
              <span>用户名</span>
              <input
                type="text"
                value={this.state.username}
                onChange={this.setUsername}
              />
            </label>
          </div>
          <div>
            <label>
              <span>密码</span>
              <input type="text" defaultValue="456" />
            </label>
          </div>
          <div>
            <label>
              <span>性别</span>
              <input type="radio" defaultChecked /> 男
              <input type="radio" /> 女
            </label>
          </div>
          <div>
            <label>
              <span>喜欢的水果</span>
              <input type="checkbox" defaultChecked /> Apple
              <input type="checkbox" /> Banana
              <input type="checkbox" /> Orange
            </label>
          </div>
          <div>
            <label>
              <span>城市</span>
              <select defaultValue="广州">
                <option value="">请选择</option>
                <option value="深圳">深圳</option>
                <option value="广州">广州</option>
                <option value="上海">上海</option>
                <option value="北京">北京</option>
              </select>
            </label>
          </div>

          <button>注册</button>
        </form>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
